<template>
    <div class="student-list">
        <div class="screen">
            <div class="left">
                <span class="label">班级信息：</span>
                <el-select
                    v-model="value"
                    filterable
                    remote
                    reserve-keyword
                    clearable
                    placeholder="请输入关键字搜索"
                    :remote-method="remoteMethod"
                    :loading="loading"
                    @change="selectClass"
                >
                    <el-option
                        v-for="(item, index) in options"
                        :key="index"
                        :label="item"
                        :value="item"
                    >
                    </el-option>
                </el-select>
                <!-- <el-button class="search" round size="small">搜索</el-button> -->
            </div>
            <div class="right">
                <span class="label">导入学生：</span>
                <span class="excel-btn" @click="importStudent">
                    <span>Excel导入</span>
                    <img src="../../../../assets/images/statistics/import.png" alt="">
                </span>
                <span
                    class="class-btn"
                    @click="importClassStudent"
                >
                    <span>授课班级导入</span>
                    <img src="../../../../assets/images/statistics/import.png" alt="">
                </span>
                <el-button
                    class="remove-btn btn-hover"
                    round
                    size="small"
                    @click="delStudent(null)"
                >
                    批量删除
                </el-button>
                <router-link
                    style="top: 1px;position: relative;"
                    class="el-button remove-btn btn-hover el-button--default el-button--small is-round"
                    tag="span"
                    :to="`/Teaching/MyCourses/Statistics/Teach/CourseReachInfo/${id}`"
                >
                    返回上一页
                </router-link>
            </div>
        </div>
        <p class="tips">注：此列表按照默认班级检索</p>
        <div class="list">
            <el-table
                :data="tableData"
                style="width: 100%"
                @select="selectStudent"
                @select-all="selectStudent"
            >
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    type="index"
                    :index="indexMethod"
                    label="序号">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="sno"
                    label="学号">
                </el-table-column>
                <el-table-column
                    prop="className"
                    label="班级">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="editStudent(scope.row)"
                        >
                            修改
                        </el-button>
                        <el-button
                            size="mini"
                            type="text"
                            @click="delStudent(scope.row.id)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-size="pageSize"
                layout="total, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <importDialog
            ref="importDialog"
            @refresh="refresh"
        />

        <importClassStudent
            ref="importClassStudent"
            @refresh="refresh"
        />

        <editorStudentDialog
            ref="editorStudentDialog"
            @refresh="refresh"
        />

        <tipsDialog
            ref="tipsDialog"
            @sure="callBack"
        />

    </div>
</template>

<script>
import importDialog from './component/importUpload';
import editorStudentDialog from './component/editorStudentDialog';
import importClassStudent from './component/importClassStudent';
import tipsDialog from '../../../../components/tipsDialog';
import { studentList, studentDel, searchClassList } from '../../../../api/courseReach';

export default {
    components: {
        importDialog,
        editorStudentDialog,
        importClassStudent,
        tipsDialog
    },
    data() {
        return {
            id: null,
            options: [],
            value: [],
            loading: false,
            className: '',
            list: [],
            checkList:[],
            total: 0,
            tableData: [],
            pageNum: 1,
            pageSize: 10,
            subData: null
        }
    },

    created() {
        this.id = this.$route.query.id;
        this.getList();
    },

    methods: {
        getList() {
            studentList({
                className: this.className,
                concludeId: this.id,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }).then((res) => {
                const { total, list } = res.data;
                this.total = total;
                this.tableData = list;
            });
        },
        indexMethod(index) {
            return (this.pageNum  - 1) * 10 + index + 1;
        },
        remoteMethod(query) {
            if (query !== '') {
                this.loading = true;
                searchClassList({
                    className: query,
                    concludeId: this.id
                }).then((res) => {
                    this.loading = false;
                    this.options = res.data;
                })
            } else {
                this.options = [];
            }
        },
        selectClass(val) {
            this.pageNum = 1;
            this.className = val || '';
            this.getList();
        },
        selectStudent(selection) {
            console.log(selection);
            const list = JSON.stringify(selection, ['id']);
            this.checkList = JSON.parse(list);
        },
        handleCurrentChange(val) {
            this.pageNum = val;
            this.getList();
        },
        importStudent() {
            this.$refs.importDialog.init(1, this.id);
        },

        editStudent(data) {
            this.$refs.editorStudentDialog.init(data);
        },

        importClassStudent() {
            const data = {
                courseId: localStorage.getItem('setCourseId'),
                concludeId: this.id
            };
            this.$refs.importClassStudent.init(data);
        },

        refresh() {
            this.pageNum = 1;
            this.getList();
        },

        delStudent(id) {
            const list = id ? [{ id }] : this.checkList;

            if (!list.length) {
                this.$message.warning('请选择删除学生');
                return false;
            };

            this.subData = list;

            this.$refs.tipsDialog.init({
                type: 'error',
                info: '是否删除选中'
            });
        },

        callBack() {
            studentDel(this.subData).then((res) => {
                this.checkList = [];
                const totalPage = Math.ceil((this.total - 1) / this.pageSize);
                this.$message.success('删除成功');
                this.pageNum = this.pageNum > totalPage ? totalPage : this.pageNum;
                this.pageNum = this.pageNum < 1 ? 1 : this.pageNum;
                this.getList();
            }).catch(() => {});
        }
    }
}
</script>
<style lang="scss">
.student-list {
    .screen {
        .el-input__inner {
            width: 200px;
        }

        input::-webkit-input-placeholder {
            color: #BABABA;
            font-size: 14px;
        }
    }

    .el-table th {
        color: #474747;
        font-weight: 400;
    }

    .el-table__body tr:hover>td{
        background-color: #f0f8ff!important;
    }

    .el-table__body tr.current-row>td{
        background-color: #f0f8ff!important;
    }
    .el-button--text {
        span:hover {
            color: #1277eb !important;
        }
    }
}
</style>
<style lang="scss" scoped>
.student-list {
    width: 1200px;
    margin: 0 auto 30px auto;
    box-sizing: border-box;
    box-shadow: 0 10px 10px rgba(0,0,0,0.05);
    background: #fff;
    padding: 30px 41px 0;
    border-radius: 0 0 5px 5px;
    .screen {
        display: flex;
        .label {
            font-size: 14px;
            color: #727272;
            font-weight: 400;
        }

        .search {
            font-size: 14px;
            margin-left: 15px;
            padding: 8px 30px;
            color: #1277EB;
            border: 1px solid #1277EB;
            font-weight: 400;
        }
        .left {
            width: 400px;
        }
        .right {
            margin-left: auto;
            img {
                width: 14px;
                vertical-align: sub;
                margin-left: 10px;
                margin-bottom: 1px;
            }

            .excel-btn, .class-btn {
                cursor: pointer;
                color: #1277EB;
                font-size: 14px;
                font-weight: 400;
            }

            .class-btn {
                margin-left: 40px;
                margin-right: 12px;
            }

            .remove-btn {
                font-size: 14px;
                margin-left: 15px;
                padding: 8px 16px;
                color: #1277EB;
                border: 1px solid #1277EB;
                font-weight: 400;
            }
        }
    }

    .tips {
        margin-top: 20px;
        color: #1277EB;
        font-weight: 400;
        font-size: 14px;
    }

    .list {
        margin-top: 18px;
    }

    .btn-hover:hover {
        background: #1277eb;
        color: #fff !important;
    }
}
</style>
